<template>
	<view>
		<div v-if="pageInfo.href">
			<web-view :src="pageInfo.href"></web-view>
		</div>
		
		<div class="loginBox" v-if="showlogin">
			<image class="logo" src="https://www.baixuemianshi.com/zhuanti/images/logo_squer_xcx.jpg" mode="widthFix"></image>
			<div class="text">请先登录</div>
			<div class="flexBox">
				<u-button type="error" @click="toLogin()">前往快捷登录</u-button>
			</div>
		</div>
	</view>
</template>

<script>
	import { mapActions } from 'vuex';
	const db = wx.cloud.database()
    export default {
        data () {
            return {
				kcid:"",
				pageInfo:{
					href:"",
					title:"",
					poster:""
				},
				showlogin:true,
				openid:""
            }
        },
		computed:{
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
        watch:{
			userphone(){
				if(this.userphone){
					this.showlogin = false
					this.getKcInfo()
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
			    title: this.pageInfo.title,
			    path: '/pages/kecheng/index?kcid=' + this.kcid,
			    imageUrl: this.pageInfo.poster   
			};
			return shareObj
		},
        onLoad(option){
            this.kcid = option.kcid
        },
		mounted (){
			if(!this.userphone){
				this.getopenid()
			}else{
				this.showlogin = false
				this.getKcInfo()
			}
		},
		created () {
			
			
		},
        methods: {
			...mapActions(['LogSetPhone']),
			getopenid() {
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						that.openid = res.result.openid
						that.getUserDetail()
					}
				})
			},
			getUserDetail() {
				let that = this
				db.collection('all_user').where({
					_openid: that.openid
				}).get({
					success: res => {
						if (res.data.length > 0) {
							that.LogSetPhone(res.data[0].phone)
							that.getKcInfo()
						}else{
							that.showlogin = true
							uni.navigateTo({
								url:"../my/login?navTlt=课程详情"
							})
						}
					}
				})
			},
			getKcInfo(){
				let that = this
				console.log(this.kcid)
				
				db.collection("kc_list").doc(that.kcid)
					.get({
						success: function(res) {
							console.log(res)
							that.pageInfo = res.data
							// if(that.pageInfo._id=="7599e7a8660a743a00735d44040bd712"){
							// 	that.setPhone()
							// }
							
						}
					});
			},
			setPhone(){
				var that = this
				console.log(that.pageInfo._id,'that.pageInfo._id')
				
				db.collection('kc_phone').where({
					phone: that.$store.getters.userphone
				}).get({
					
					success: function(res) {
						if(res.data.length == 0){
								db.collection('kc_phone').add({
									data: {
										phone:that.$store.getters.userphone,
										time: that.getTime()
									},
									success: function(res) {
										
									},
									fail: function(req) {
									}
								})
						}
					}
				})
				
			
			},
			getTime() {
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let sec = day.getSeconds().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu + ':' + sec
				return time
			},
			toLogin(){
				uni.navigateTo({
					url:"../my/login?navTlt=课程详情"
				})
			}
		},
        
    }
</script>

<style scoped>
	
	.loginBox{position: fixed; top: 0; left: 0; width: 100%; height: calc(100% - 200rpx); padding-bottom: 200rpx; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center;}
	.loginBox .bigFont{font-size: 26rpx;}
	.loginBox .logo{width: 130rpx; display: block; margin: 0 auto 70rpx; padding: 10rpx; border-radius: 15rpx; background-color: #e70012;}
	.loginBox .flexBox{width: 80%;}
	.text{font-size: 30rpx; text-align: center; margin: 0 0 40rpx;}
	.other{font-size: 26rpx; text-align: center; margin: 50rpx 0 30rpx;}
	.out{font-size: 24rpx; text-align: center; margin-top: 100rpx; color: #999999;}
	
</style>